<template>
	<a-select
		v-model:value="text"
		show-search
		placeholder="请选择"
		style="width: 200px"
		:options="items"
		:fieldNames="{label:'name', value:'id'}"
		:filter-option="filterOption"
		@focus="search"
		@change="search"
		@select="select"
	></a-select>
</template>

<script lang="ts">
// import http from '@/utils/http'

export default {
	name: "RelateSelector",
	props: {
		value: {
			type: Number,
			default: 0
		},
		label: {
			type: String,
			default: ''
		},
		field: {
			type: String,
			default: 'title'
		},
		path: {
			type: String,
			default: ''
		}
	},
	data() {
		return {
			text: '',
			items: []
		};
	},
	mounted() {
		this.text = this.label
	},
	methods: {
		search(text: string = '') {
			const params = {}
			params[this.field] = text
			useGet(this.path, params).then((data: any) => {
				this.items = data.items
			});
		},
		select(v: Number){
			this.$emit('update:value', v)
			this.$emit('update:label', this.items.find(r=>r.id==v).name)
		},
		filterOption (input: string, option: any) {
		  return option.name.toLowerCase().indexOf(input.toLowerCase()) >= 0;
		}
	},
	watch:{
		label(val: string = ''){
			this.text = val
		}
	}
}
</script>
